<template>
    <el-row>
        <el-table :data="commentData" stripe @selection-change="selectionChange">
            <el-table-column type="selection"></el-table-column>
            <el-table-column prop="name" label="用户" align="center" width="120">
                <template slot-scope="scope">
                    <img :src="scope.row.user.avatarUrl" alt="" style="width:50px;height:50px;border-radius:50%">
                    <div class="text_ellipsis">{{scope.row.user.nickName}}</div>
                </template>
            </el-table-column>
            <el-table-column prop="order_id" label="订单号" align="center" width="80">
                <template slot-scope="scope">
                    <el-row>{{scope.row.order_id}}</el-row>
                </template>
            </el-table-column>
            <el-table-column prop="content" label="评论内容" align="center">
            </el-table-column>
            <el-table-column label="回复内容" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.subComment.content">{{scope.row.subComment.content}}</span>
                    <span v-else>-</span>
                </template>
            </el-table-column>
            <el-table-column prop="created_at" label="创建时间" align="center" width="100">
                <template slot-scope="scope">
                    <el-row>{{format(scope.row.created_at)}}</el-row>
                </template>
            </el-table-column>
            <el-table-column label="状态" align="center" width="80">
                <template slot-scope="scope">
                    <el-row style="font-weight:700" :style="{color:scope.row.status?'#19be6b':'#f50'}">{{scope.row.status?'开启':'关闭'}}</el-row>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="80">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" plain @click="replyComment(scope.row)">回复</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-row style="margin:24px 0">
            <el-col :span="12">
                <el-button type="warning" size="medium" plain @click="changeStatus(1)">开启</el-button>
                <el-button type="info" size="medium" plain @click="changeStatus(0)">关闭</el-button>
                <el-button type="danger" size="medium" plain @click="commentDel">删除</el-button>
            </el-col>
            <el-col :span="12" style="text-align:right">
                <el-pagination background layout="total,prev,pager,next" :total="pagination.rowCount" :page-size="pagination.pageSize" @current-change="changePage"></el-pagination>
            </el-col>
        </el-row>
        <el-dialog title="回复内容" :visible.sync="replyModal" width="600px">
            <el-input type="textarea" :rows="5" placeholder="请输入回复内容,限制100字内" :maxlength="100" v-model="replyContent"></el-input>
            <p slot="footer">
                <el-button type="primary" @click="replyOk">确定</el-button>
            </p>
        </el-dialog>
    </el-row>
</template>
<script>
export default {
    layout: "shop",
    data() {
        return {
            commentData: [],
            pagination: {},
            commentSelection: [],
            replyModal: false,
            replyContent: ""
        };
    },
    async asyncData({ app, query }) {
        let data = {};
        let res = await app.$axios.$get(`/api/comment/home/home/list`);
        if (res && res.errmsg === "ok") {
            data.commentData = res.data.data;
            data.pagination = res.data.pagination;
        }
        return data;
    },
    methods: {
        async getData() {
            let res = await this.$axios.$get(
                `/api/comment/home/home/list?page=${this.pagination.page}`
            );
            if (res && res.errmsg === "ok") {
                this.commentData = res.data.data;
                this.pagination = res.data.pagination;
            }
        },
        changePage(page) {
            this.pagination.page = page;
            this.getData();
        },

        replyComment(row) {
            this.replyModal = true;
            this.id = row.id;
            this.replyContent = row.subComment.content;
        },
        async replyOk() {
            const res = await this.$axios.$post(
                "/api/comment/home/home/replyComment",
                {
                    id: this.id,
                    content: this.replyContent
                }
            );
            if (res && res.errmsg === "ok") {
                this.$message.success("保存成功");
                this.replyModal = false;
                this.getData();
            }
        },
        selectionChange(val) {
            this.commentSelection = val;
        },
        //开启关闭评论
        async changeStatus(status) {
            if (!this.commentSelection.length) {
                this.$message.warning("请选择评论");
                return;
            }
            let data = [];
            for (let key in this.commentSelection) {
                data.push({
                    id: this.commentSelection[key].id,
                    status: status
                });
            }
            const res = await this.$axios.$post(
                `/api/comment/home/home/changeStatus`,
                data
            );
            if (res && res.errmsg === "ok") {
                this.$message.success(status == 1 ? "已开启" : "已关闭");
                this.getData();
            }
        },
        async commentDel() {
            if (!this.commentSelection.length) {
                this.$message.warning("请选择评论");
                return;
            }
            let data = [];
            for (let key in this.commentSelection) {
                data.push({
                    id: this.commentSelection[key].id
                });
            }
            const res = await this.$axios.$post(
                `/api/comment/home/home/delStatus`,
                data
            );
            if (res && res.errmsg === "ok") {
                this.$message.success("已删除");
                this.getData();
            }
        }
    }
};
</script>

